<template>
  <div class="test">
    <CommonDialog ref="DialogDemo" :dialog-data="dialogData" />
    <CommonDialog ref="FilePreview" :width="'80%'" :height="'90%'" :top="'5%'" />
    <!-- 用于测试 -->
    <div>上传文件测试</div>
    <el-upload
      class="upload-demo"
      multiple
      :http-request="handleUpload"
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-button @click="handleDownload">下载</el-button>

    <!-- 显示弹窗 -->
    <el-button type="primary" @click="handleShowDialogDemo">显示弹窗</el-button>

    <!-- 附件预览 -->
    <el-button type="primary" @click="handleFilePreview">显示文件预览</el-button>

    <!-- markdown编辑器 -->
    <v-md-editor v-model="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fileParams: {},
      dialogData: { id: 1 },
      text: '# Test'
    }
  },
  watch: {
    text(val) {
      console.log(val)
    }
  },
  methods: {
    // 上传
    handleUpload(e) {
      const file = e.file
      const formData = new FormData()
      formData.append('file', file)
      this.$http.common.upload(formData).then(res => {
        this.fileParams = res.data.data
        this.$message.success('上传成功！')
      })
    },
    // 文件下载
    handleDownload() {
      this.$http.common.download(this.fileParams, this.fileParams.filename).then(res => {
        this.$message.success('上传成功！')
      })
    },
    // 弹窗显示
    handleShowDialogDemo() {
      this.$refs.DialogDemo.handleShow('DialogDemo', 'DialogDemo')
    },
    // 弹窗显示组件
    handleFilePreview() {
      this.$refs.FilePreview.handleShow('FilePreview', '附件预览')
    }
  }
}
</script>

<style lang="scss" scoped></style>
